import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { NavBar, Card, Image, Popup, Button } from "antd-mobile";
import AMapLoader from '@amap/amap-jsapi-loader';
import http from "../../utils/http";
import styles from "./index.module.scss";
import { CartO, ChatO } from "@react-vant/icons";
import { ActionBar } from "react-vant";

const Index = () => {
    const navigate = useNavigate();
    const { id } = useParams();

    //详情页初始数据
    const [detailItem, setDetailItem] = useState({});
    const [visible1, setVisible1] = useState(false);

    //模拟场次数据
    const [sessions, setSessions] = useState([
        {
            title: "2023-05-18 星期一 19:00",
            status: false,
        },
        {
            title: "2023-05-19 星期二 19:00",
            status: true,
        },
        {
            title: "2023-05-20 星期周三 19:00",
            status: true,
        },
    ]);

    //获取详情页数据
    const getList = async () => {
        const res = await http.get("/api/list/detail", { params: { id } });
        const { data } = res.data;
        setDetailItem(data);
    };
    let map = null;
    useEffect(() => {
        AMapLoader.load({
            key: "ba1bc24a3fbe2b917212ae684813445b", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {
                map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [116.397428, 39.90923], // 初始化地图中心点位置
                });
            })
            .catch((e) => {
                console.log(e);
            });
        return () => {
            map?.destroy();
        };
    }, []);
    useEffect(() => {
        getList();
    }, []);

    if (!detailItem.id) {
        return <div>数据加载中...</div>;
    }

    return (
        <div>
            <NavBar onBack={() => navigate("/")}>活动详情</NavBar>
            <Card>
                <Image
                    fit="cover"
                    style={{ borderRadius: 8, height: 230, background: "#f2f2f2" }}
                    src={detailItem.image}
                ></Image>
            </Card>
            <div className={styles.card_bottom}>
                <div className={styles.bot_topinner}>
                    <h3>{detailItem.title}</h3>
                    <dl>
                        <dt>
                            <img src={detailItem.image}></img>
                        </dt>
                        <dd>{detailItem.title}</dd>
                    </dl>
                </div>
                <span className={styles.priceEl}>¥{detailItem.price}</span>
            </div>
            <div className="demo-action-bar">
                <ActionBar>
                    <ActionBar.Icon
                        icon={<ChatO />}
                        text="客服"
                        onClick={() => console.log("chat click")}
                    />
                    <ActionBar.Icon
                        icon={<CartO />}
                        text="首页"
                        onClick={() => console.log("cart click")}
                    />
                    <ActionBar.Button
                        type="danger"
                        text="选座购票"
                        onClick={() => setVisible1(true)}
                    />
                </ActionBar>

                <Popup
                    visible={visible1}
                    onMaskClick={() => {
                        setVisible1(false);
                    }}
                    onClose={() => {
                        setVisible1(false);
                    }}
                    showCloseButton={true}
                >
                    <div>
                        {sessions.map((item, ind) => (
                            <p className={styles.selItem} key={ind}>
                                {item.title}{" "}
                                {!item.status ? <Button disabled={true}>票品售完</Button> : ""}
                            </p>
                        ))}
                    </div>
                    <div
                        className={styles.d_btn}
                        onClick={() =>
                            navigate(`/selseat`, {
                                state: detailItem,
                            })
                        }
                    >
                        立即预定
                    </div>
                </Popup>
            </div>
            <div>
                <div
                    id="container"
                    style={{ height: "500px" }}
                ></div>
            </div>
        </div>
    );
};

export default Index;
